<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-door-lock-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <view v-if="doorLock.length == 0" class="no-doorLock">
        <image class="image" :src="$CDN('/common/static/images/img_yousuo@3x.png')"></image>
        无门锁
      </view>
      <view v-if="doorLock.length > 0" class="doorLock">
        <view class="room-detail">
          <view class="room-box">
            <image class="image" :src="$CDN('/common/static/images/img_yousuo@3x.png')"></image>
            <text class="room"> {{ roomName }}</text>
          </view>
          <view class="room-name" @click="handleChangeRoom">
            {{ formData.project_name + '-' + formData.room_name }}
            <uv-icon v-if="doorLock.length > 1" class="room-icon" name="arrow-down-fill"></uv-icon>
          </view>
          <view class="button-wrap">
            <!-- <view v-if="formData.is_open_temp_pwd == 1" class="pass-button" @click="handleJump(`/pages/subpackage/door-lock/temporary-pass?lock_id=${formData.id}`)">
              获取临时密码
            </view> -->
            <view class="pass-button" @click="handleJump(`/pages/subpackage/door-lock/modify-pass?lock_id=${formData.id}&room_name=${formData.room_name}`)">修改房间密码</view>
            <!-- 苏州后台关闭了入口，暂时注释 -->
            <!-- <view class="slider-button" v-if="formData.is_remote == 1">
              <text v-if="!value" class="text">向右滑动即可远程开门</text>
              <uv-slider v-model="value" backgroundColor="white" activeColor="white" min="0" max="100" @change="sliderChange"></uv-slider>
            </view> -->
          </view>
        </view>
        <uv-picker ref="picker" :columns="columns" keyName="showName" @confirm="confirm"></uv-picker>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { customerUnlock, lockInfo, lockList } from './api'

export default {
  name: 'setting',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      value: 0,
      doorLock: [],
      formData: {
        project_name: '',
        room_name: '',
        id: '',
        is_open_temp_pwd: '',
        is_remote: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    columns() {
      return [
        this.doorLock.map((v) => {
          return {
            ...v,
            showName: v.project_name + '-' + v.room_name,
          }
        }),
      ]
    },
    roomName() {
      const list = this.formData.room_name.split('-')
      return list[list.length - 1]
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    await this.getList()
    await this.lockInfo()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getList() {
      const { data } = await lockList()
      this.doorLock = data
      if (this.doorLock.length == 0) return
      for (let key in this.formData) {
        this.formData[key] = this.doorLock[0][key]
      }
    },
    async lockInfo() {
      const { id } = this.formData
      const { data } = await lockInfo({ lock_id: id })
      const { is_open_temp_pwd, is_remote } = data
      this.formData.is_remote = is_remote
      this.formData.is_open_temp_pwd = is_open_temp_pwd
    },
    handleChangeRoom() {
      if (this.doorLock.length <= 1) return
      this.$refs.picker.open()
    },
    confirm({ value }) {
      this.formData = value[0]
      this.lockInfo()
    },
    async sliderChange(value) {
      if (value != 100) {
        this.value = 0
      } else {
        const { id } = this.formData
        this.value = 0
        const { data, errcode } = await customerUnlock({ lockId: id })
        if (errcode === 0) {
          uni.$uv.toast('正在开门中,请稍等')
        }
      }
    },
    handleJump(path) {
      if (path) {
        this.$ROUTE.go(path)
        return
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('door-lock-container')} {
  position: relative;
  // background: #f1f1f1;
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .no-doorLock {
    // background: red;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    flex-direction: column;
    .image {
      width: 80px;
      height: 80px;
      margin-bottom: 30px;
    }
  }
  .doorLock {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    font-size: 12px;
    box-sizing: border-box;
    padding-top: 80px;
    .room-detail {
      display: flex;
      flex-direction: column;
      align-items: center;
      .room-box {
        position: relative;
        margin-bottom: 30px;
        .image {
          width: 80px;
          height: 80px;
        }
        .room {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          padding-top: 10px;
          transform: rotate(2deg);
          color: white;
        }
      }

      .room-name {
        display: flex;
        .room-icon {
          margin-left: 10px;
        }
      }
      .button-wrap {
        text-align: center;
        .pass-button {
          width: 180px;
          border: 1px solid #666666;
          padding: 12px 10px;
          border-radius: 20px;
          margin-top: 20px;
        }
        .slider-button {
          position: relative;
          margin-top: 100px;
          width: 180px;
          border: 1px solid #666666;
          // padding: 12px 10px;
          border-radius: 20px;
          .text {
            line-height: 38px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>
